<template>
  <div class="decorative-title-wrapper" :style="{ width }">
    <h3
        class="decorative-title"
        :style="{
        fontSize: fontSize,
        fontWeight: fontWeight,
        color: textColor,
        textShadow: `0 0 4px ${strokeColor}, 0 0 8px ${strokeColor}, 0 0 12px ${strokeColor}, 0 0 16px ${strokeColor}`
      }"
    >
      {{ text }}
    </h3>
  </div>
</template>

<script>
export default {
  name: 'DecorativeTitle',
  props: {
    text: {
      type: String,
      required: true
    },
    fontSize: {
      type: String,
      default: '13px' // 默认值确保基础样式生效
    },
    strokeColor: {
      type: String,
      default: '#00baff'
    },
    textColor: {
      type: String,
      default: '#ffffff'
    },
    fontWeight: {
      type: String,
      default: 'bold'
    },
    width: {
      type: String,
      default: '200px'
    }
  }
}
</script>

<style scoped>
.decorative-title-wrapper {
  position: relative;
  padding: 5px 0;
  padding-left: 10px;
}

.decorative-title {
  margin: 0;
  letter-spacing: 1.5px;
  position: relative;
  display: inline-block;
  line-height: 1.2;
  -webkit-font-smoothing: auto;
}
</style>
